<!DOCTYPE html>
<!--
  ~ Copyright (c) 2018 the original author or authors.
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>微信支付</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="text" name="outTradeNo" id="outTradeNo"/>
<input type="submit" value="提交" id="submitBtn">
<script>

    $("#submitBtn").on("click", function () {
        $.post('/unifiedOrderWithJsApi',
            {
                outTradeNo: $('#outTradeNo').val()
            },
            function (data) {
                function onBridgeReady() {
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', data,
                        function (res) {
                            alert(res.err_msg)
                        }
                    );
                }

                if (typeof WeixinJSBridge == "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                    }
                } else {
                    onBridgeReady();
                }
            }
        )
    });

</script>
</body>
</html>